// The Material Design color palette
@import 'md-colors';

// The UI font stack
$font-stack             : -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !default;
$font-weight--semibold  : 600 !default;
$font-weight--bold      : 700 !default;

// Base font size
$base-font-size         : 100% !default; // typically 16px in most browsers

// Brand colors
$brand-primary-color    : $md-blue !default;
$brand-accent-color     : $md-purple-a400 !default;

// Primary text color
$primary-text-color     : rgba(black, 0.87) !default;

// Secondary text color
$secondary-text-color   : rgba(black, 0.54) !default;

// Hint text color
$hint-text-color        : rgba(black, 0.38) !default;

// Disabled text color
$disabled-text-color    : rgba(black, 0.38) !default;

// Divider color
$divider-color          : rgba(black, 0.12) !default;

// ================================================
// Input fields
// ================================================

$ui-input-height                    : rem(32px) !default;
$ui-input-margin-bottom             : rem(16px) !default;

// Input label
$ui-input-label-color               : $secondary-text-color !default;
$ui-input-label-color--hover        : rgba(black, 0.75) !default;
$ui-input-label-color--active       : $brand-primary-color !default;
$ui-input-label-color--invalid      : $md-red !default;
$ui-input-label-font-size           : rem(15px) !default;
$ui-input-label-line-height         : normal !default;
$ui-input-label-margin-bottom       : 0 !default;
$ui-input-label-top--inline         : rem(26px) !default;

// Input text
$ui-input-text-color                : $primary-text-color !default;
$ui-input-text-font-size            : rem(16px) !default;
$ui-input-text-color--disabled      : $disabled-text-color !default;
$ui-input-text-color--invalid       : $md-red !default;

// Input border
$ui-input-border-color              : $divider-color !default;
$ui-input-border-color--hover       : rgba(black, 0.3) !default;
$ui-input-border-color--active      : $brand-primary-color !default;
$ui-input-border-color--invalid     : $md-red !default;
$ui-input-border-width              : 1px !default;
$ui-input-border-width--active      : 2px !default;
$ui-input-border-style--disabled    : dotted !default;

// Input icons
$ui-input-icon-color                    : $secondary-text-color !default;
$ui-input-icon-opacity--disabled        : 0.6 !default;
$ui-input-icon-margin-right             : rem(12px) !default;
$ui-input-icon-margin-top               : rem(4px) !default;
$ui-input-icon-margin-top--with-label   : rem(24px) !default;

// Input buttons (dropdown button icon, clear input button icon)
$ui-input-button-color                  : $secondary-text-color !default;
$ui-input-button-color--hover           : $primary-text-color !default;
$ui-input-button-opacity--disabled      : 0.6 !default;
$ui-input-button-size                   : rem(18px) !default;
$ui-input-button-margin-top             : rem(7px) !default;
$ui-input-button-margin-top--with-label : rem(27px) !default;

// Input feedback, help and error text
$ui-input-feedback-font-size            : rem(14px) !default;
$ui-input-feedback-line-height          : 1.2 !default;
$ui-input-feedback-padding-top          : rem(4px) !default;
$ui-input-feedback-opacity--disabled    : 0.8 !default;
$ui-input-feedback-color                : $secondary-text-color !default;
$ui-input-feedback-color--invalid       : $md-red !default;

// ================================================
// Buttons (UiButton, UiFileupload)
// ================================================

$ui-button-font-size                : rem(14px) !default;
$ui-button-font-size--small         : rem(14px) !default;
$ui-button-font-size--large         : rem(16px) !default;
$ui-button-height                   : rem(36px) !default;
$ui-button-height--small            : rem(32px) !default;
$ui-button-height--large            : rem(48px) !default;
$ui-button-font-weight              : $font-weight--semibold !default;

// ================================================
// Dropdowns (UiAutocomplete, UiPopover, UiMenu, UiSelect)
// ================================================

$ui-dropdown-item-font-size         : rem(15px) !default;
$ui-menu-item-hover-color           : #EEEEEE; // rgba(black, 0.1);

// ================================================
// UiCalendar
// ================================================

$ui-calendar-cell-size              : rem(36px) !default;
$ui-calendar-controls-height        : rem(40px) !default;
$ui-calendar-month-header-height    : rem(40px) !default;

// ================================================
// Border radius
// ================================================

$ui-default-border-radius       : rem(2px) !default;

// ================================================
// Z-index
// ================================================

// Z-index levels
$z-index-level-1        : 20 !default;
$z-index-level-2        : 30 !default;
$z-index-level-3        : 40 !default;
$z-index-level-4        : 50 !default;
$z-index-level-5        : 60 !default;
$z-index-level-6        : 70 !default;

// Z-index usage
$z-index-toolbar        : $z-index-level-1 !default;
$z-index-fab            : $z-index-level-2 !default;
$z-index-nav-drawer     : $z-index-level-3 !default;
$z-index-modal          : $z-index-level-4 !default;
$z-index-dropdown       : $z-index-level-5 !default;
$z-index-tooltip        : $z-index-level-6 !default;
